<template>
  <div id="app">
    <!-- 测试按钮项 -->
    <!-- <div class="row">
      <jul-button icon="jul-icon-edit" type="defalut" @click="fn">按钮</jul-button>
      <jul-button type="primary">按钮</jul-button>
      <jul-button type="success">按钮</jul-button>
      <jul-button type="info">按钮</jul-button>
      <jul-button type="warning">按钮</jul-button>
      <jul-button type="danger">按钮</jul-button>
    </div>
    <div class="row">
      <jul-button disabled icon="jul-icon-edit" round>按钮</jul-button>
      <jul-button disabled round type="primary">按钮</jul-button>
      <jul-button disabled round type="success">按钮</jul-button>
      <jul-button disabled round type="info">按钮</jul-button>
      <jul-button disabled round type="warning">按钮</jul-button>
      <jul-button disabled round type="danger">按钮</jul-button>
    </div>

    <div class="row">
      <jul-button icon="jul-icon-edit" circle type="primary"></jul-button>
      <jul-button icon="jul-icon-check" circle type="success"></jul-button>
      <jul-button icon="jul-icon-message" circle type="info"></jul-button>
      <jul-button icon="jul-icon-collect" circle type="warning"></jul-button>
      <jul-button icon="jul-icon-delete" circle type="danger"></jul-button>
    </div> -->

<!-- sync修饰符是一个语法糖 -->
<jul-button type="primary" @click="visible = true">打开对话框</jul-button>

    <!-- 测试对话框 -->
    <jul-dialog title="温馨提示"></jul-dialog>
    <!-- 控制对话框 -->
    <jul-dialog width="60%" top="20px" :visible.sync="visible">
      <!-- 具名插槽控制标题 模板替换插槽内容 不写默认插槽内容 -->
      <template v-slot:title>
      </template>
      <!-- 默认插槽控制内容 -->
      123
      <!-- 具名插槽控制底部 -->
      <template v-slot:footer>
        <jul-button type="primary" @click="visible = false">确定</jul-button>
        <jul-button @click="visible = false">取消</jul-button>
      </template>
    </jul-dialog>

    <!-- 测试demo -->
    <!-- 1. :money="money"   @update:money="绑定的事件"  -->
    <!-- <demo :visiable="visiable" :money="money" @update:money="fn1"></demo> -->

    <!-- 语法糖sync的方法解决以上繁琐的两个步骤 做了简化 :money.sync 相当于上面的两部操作 不需要我们去绑定事件 -->
    <!-- <demo :money.sync="money"></demo> -->
  <!-- <transition name="aa">
      <div v-show="visible">我是一个文本</div>
  </transition> -->

  <!-- 输入框 -->
    <!-- <jul-input placeholder="请输入用户名" type="password" name="username" disable></jul-input> -->
    <!-- <br/> -->
    <!-- <jul-input type="text" placeholder="请输入用户名" v-model="username" clearable></jul-input>
    <jul-input type="password" placeholder="请输入密码" v-model="password" showPassword></jul-input> -->
    <!-- v-model实质上是一个语法糖  -->
    <!-- <input type="text" v-model="username">  等价于==> -->
    <!-- <input type="text" :value="username" @input="username=$event.target.value"> -->

    <!-- switch开关 -->
    <!-- <jul-switch v-model="active"></jul-switch> -->
    <!-- <jul-switch v-model="active" active-color="green" inactive-color="red" name="username"></jul-switch> -->

    <!-- 单选框 -->
    <!-- <jul-radio label="5" v-model="gender" name="username">男</jul-radio>
    <jul-radio label="5" v-model="gender">女</jul-radio>
    <jul-radio label="3" v-model="gender"></jul-radio>
    <jul-radio label="2" v-model="gender"></jul-radio> -->

    <!-- 单选框组 -->
    <!-- <jul-radio-group v-model="gender">
      <jul-radio label="1">男</jul-radio>
      <jul-radio label="0">女</jul-radio>
    </jul-radio-group> -->

    <!-- 单选复选框 只有ture false -->
    <!-- <jul-checkbox v-model="active">是否选中</jul-checkbox> -->

    <!-- 多选复选框 数组形式 -->
    <!-- <jul-checkbox-group v-model="hobby">
      <jul-checkbox label="抽烟"></jul-checkbox>
      <jul-checkbox label="喝酒"></jul-checkbox>
      <jul-checkbox label="烫头"></jul-checkbox>
    </jul-checkbox-group> -->

  </div>
</template>

<script>
// import Demo from './demo/demo'
export default {
  // components: {
  //   Demo
  // },
  data() {
    return {
      visible: false,
      // money: 100,
      // username: '',
      // password: '',
      // active: false
      // gender: '1'
      // active: false,
      // hobby: ['抽烟', '喝酒', '烫头']
    }
  },
  methods: {
    fn() {
      console.log(132)
    },
    close(value) {
      this.visible = value
    },
    fn1(value) {
      this.money = value
    }
  }
}
</script>

<style lang="scss" scoped>
  // .aa-enter {
  //   opacity: 0;
  // }
  // .aa-enter-to {
  //   opacity: 1;
  // }
  // .aa-enter-active {
  //   transition: all 1s;
  // }
  // .aa-leave {
  //   opacity: 1;
  // }
  // .aa-leave-to {
  //   opacity: 0;
  // }
  // .aa-leave-active {
  //   transition: all 1s;
  // }
  // .aa-enter-active {
  //   animation: run 1s;
  // }
  // .aa-leave-active {
  //   animation: run 1s reverse;
  // }

  // @keyframes run {
  //   0% {
  //     opacity: 0;
  //   }
  //   100% {
  //     opacity: 1;
  //   }
  // }

  .row {
    margin-bottom: 20px;
    .jul-button {
      margin-right: 20px;
    }
  }
</style>
